<template>
	<view style="height: 180rpx;">
		<view class="content" :style="{zIndex}">
			<view class="tabber_box">
				<view v-for="(item,index) in tabBars" :key="index"
					:style="{width:`${ratio}%`,display:'flex',justifyContent:'space-around',margin: '24rpx 0'}">
					<view class="tabber_item" @click="onNav(item.pagePath)">
						<image v-if="currentPath === item.pagePath" :src="item.iconPath"></image>
						<image v-else :src="item.selectedIconPath"></image>
						<text
							:style="{color:currentPath === item.pagePath ? item.selectedColor : item.color}">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		props: {
			currentPath: { // 当前页面路径
				type: String,
				default: '/pages/index/index',
			},
			zIndex: { // 界面层级
				type: Number,
				default: 10
			}
 
		},
		data() {
			const color = '#A6A6A6';
			const selectedColor = '#8FC36E';
			return {
				tabBars: [{
						name: '首页',
						iconPath: '../../static/tabbar/a1.png',
						selectedIconPath: '../../static/tabbar/1.png',
						pagePath: '/pages/index/index',
						color,
						selectedColor,
					},
					{
						name: '认养',
						iconPath: '../../static/tabbar/a2.png',
						selectedIconPath: '../../static/tabbar/2.png',
						pagePath: '/pages/sponsor/sponsor',
						color,
						selectedColor,
					},
					{
						name: '农场游戏',
						iconPath: '../../static/tabbar/a3.png',
						selectedIconPath: '../../static/tabbar/3.png',
						pagePath: '/pages/farmville/farmville',
						color,
						selectedColor,
					},
					{
						name: '商城',
						iconPath: '../../static/tabbar/a4.png',
						selectedIconPath: '../../static/tabbar/4.png',
						pagePath: '/pages/shoppingPage/shoppingPage',
						color,
						selectedColor,
					},
					{
						name: '我的',
						iconPath: '../../static/tabbar/a5.png',
						selectedIconPath: '../../static/tabbar/5.png',
						pagePath: '/pages/user/user',
						color,
						selectedColor,
					},
				],
				ratio: 0,
				isLogin: false,
			}
		},
		mounted() {
			this.ratio = 100 / this.tabBars.length;
		},
		methods: {
			onNav(url) {
					if (this.currentPath !== url) uni.switchTab({
						url
					});
			}
		}
	}
</script>
 
<style lang="scss" scoped>
.content {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 9999;
	.tabber_box {
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #ffffff;
		padding-bottom: calc(env(safe-area-inset-bottom) - 48rpx) ; // 适配iphoneX的底部
		padding-bottom: calc(env(safe-area-inset-bottom) - 48rpx); /*兼容 IOS>11.2*/
		image {
			width: 58rpx;
			height: 50rpx;
		}

		.tabber_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 31rpx;
		}
		
	}
}
</style>